<!DOCTYPE html>
<html lang="zn-ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">  
<title>国际象棋</title>
<link rel="stylesheet" href="./chess.css">
<script src="./static/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div class="title">
        <div class="row">
            <select v-model="mode">
                <option value="1">人机对战</option>
                <option value="2">人人对战</option>
            </select>
            <button @click="start">{{status==0?"开始游戏":"重新开始"}}</button>
            <button @click="auto">自动玩</button>
            <button @click="stop_auto">停止自动玩</button>
            <button @click="clear_cache">清除缓存</button>
        </div>
        <div class="row">
            <span v-show="step.length>0">第{{step.length}}步</span>
            <button @click="prev_step" v-show="step.length>0">上一步</button>
            <span>{{color==1?"白棋走":"黑棋走"}}</span>
            <span class="red">{{msg}}</span>
        </div>
    </div>
    <div class="container">
        <div class="row" >
            <div class="left-num">
                <div class="left-td td" v-for="v in number">{{v}}</div>
            </div>
            
            <div class="td" 
                :class="{
                    gray:v.bg==1,
                    btop:i<8,
                    cursor:v.icon,
                    ready:ready_i==i,
                    canrun:fun.in_array(i,can_run),
                    now:to==i,
                    from:from==i,
                }"
                 v-for="(v,i) in list"
                 @click="run(i,v)"
            >
                <div class="qz">
                    <div class="bg-text">{{i}}</div>
                    <div class='td-icon' v-show="v.icon">{{v.icon}}</div>
                </div>
            </div>

            <div class="bottom-letter">
                <div class="td bottom-td" v-for="v in letter">{{v}}</div>
            </div>
        </div>
        
    </div>
</div>   
</body>
</html>
<script src="./static/js/fun.js"></script>
<script src="./chess.js"></script>
<script src="./chess.vue.js"></script>
<!-- 
特殊规则还没有考虑：
1. 吃过路兵
2. 王车易位
3. 兵变后==>实际上，规则允许变成除王和兵之外的任一棋子，后期需要支持这个功能
4. 将军时，被攻击方必须立即“应将”，否则判输！

✨王车易位✨
又称“入堡”，把王向车的方向打横移动两格，再把车直接移到王的另一侧，放在王的相邻一格。如果王与车之间有两个格的称为“王翼易位”，俗称“短易位”；王与车之间有三个格的称为“后翼易位”，俗称“长易位”。

🍀用王车易位的前提：
1.王未被移动过。
2.参与易位的车未被移动过。

🍀如果发生以下情况之一，则暂时不能王车易位：
1.当王被将军时
2.王和参与易位的车之间有棋子；
3.王所在的格，或易位时王将要经过的格，或易位后王将占据的格，正在受到对方的一个或几个棋子的进攻。

## 还存在的问题：
1. 当受直线攻击时，被自己挡住的格子会被判断为安全（不在对方控制范围内）==>需要使用新的list来判断
2. 走棋的时候只考虑了自己的安全性，没考虑逃走后其它棋子是否会被吃？ ==>同样是被自己挡住了，要判断只能使用新的list
3. 走后会被将军的情况，没作判断==》上同

 -->